
.scenic-card {
  width: 100%;
  position: relative;
  padding: 0;

  .scenic-thumb {
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    background-color: #fff;
    background-size: 100% 100%;
  }

  .scenic-title {
    position: absolute;
    top: 0;
    padding: 1rem;
    line-height: 2em;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
  }

  .scenic-tips {
    line-height: 3em;
    color: #000;

    span {
      display: inline-block;

      & + span {
        margin-left: .5rem;
      }
    }

    i {
      padding-right: .2rem;
    }
  }
}


.act-container {
  width: 100%;
  background-color: #fff;
  padding-bottom: 3rem;

  .act-thumb {
    width: 100%;

    img {
      width: 100%;
      height: 56%;
    }
  }

  .act-head {
    padding: 1rem;
    border-bottom: .01rem solid #d2eafb;

    h2 {
      margin: 0;
      font-size: 1.2em;
      font-weight: normal;
      line-height: 1.8em;
    }

    .wave-progress {
      width: 3rem;
      height: 3rem;
      border: .06rem solid #108ee9;
    }

    .act-tips {
      font-size: .8em;
      color: #666;

      .am-icon {
        color: #108ee9;
      }
    }
  }

  .act-body {
    padding: 1rem;
    border-bottom: .01rem solid #d2eafb;

    h2 {
      margin: 0;
      font-size: 1.2em;
      font-weight: normal;
      line-height: 1.8em;
    }

    .act-detail {
      line-height: 2em;
      padding: 1rem 0;

      img {
        width: 100%;
      }
    }
  }
}

